<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>起名小程序 - 所有界面预览</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="chinese-style.css">
  <style>
    body {
      font-family: "FangSong", "仿宋", "SimSun", "宋体", serif;
      background-color: var(--rice-paper);
      margin: 0;
      padding: 0;
    }
    
    .header {
      padding: 20px;
      text-align: center;
      background-color: var(--rice-paper-dark);
      border-bottom: 1px solid var(--ink-wash-2);
      margin-bottom: 20px;
      position: relative;
    }
    
    .header:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--vermilion), var(--mountain-green), var(--indigo-blue));
      opacity: 0.5;
    }
    
    .page-title {
      font-size: 24px;
      font-weight: bold;
      color: var(--ink-black);
      margin-bottom: 10px;
    }
    
    .page-description {
      color: var(--ink-gray);
      font-size: 16px;
    }
    
    .preview-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
      gap: 30px;
      padding: 20px;
      justify-items: center;
    }
    
    .preview-card {
      width: 375px;
      background-color: white;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      position: relative;
    }
    
    .preview-header {
      padding: 15px;
      background-color: var(--rice-paper-dark);
      border-bottom: 1px solid var(--ink-wash-1);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .preview-title {
      font-weight: bold;
      color: var(--ink-black);
    }
    
    .iframe-container {
      width: 100%;
      height: 667px;
      border: none;
      position: relative;
    }
    
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
    
    .device-frame {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 12px solid #e2e2e2;
      border-radius: 30px;
      pointer-events: none;
      z-index: 10;
      box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.1);
    }
    
    .device-frame:before {
      content: '';
      position: absolute;
      width: 50%;
      height: 25px;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #e2e2e2;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      z-index: 11;
    }
    
    .chinese-pattern {
      position: absolute;
      width: 120px;
      height: 120px;
      background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 A60 60 0 0 1 60 0 A60 60 0 0 1 120 60 A60 60 0 0 1 60 120 A60 60 0 0 1 0 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3Cpath d='M30 60 A30 30 0 0 1 60 30 A30 30 0 0 1 90 60 A30 30 0 0 1 60 90 A30 30 0 0 1 30 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
      opacity: 0.03;
      z-index: -1;
    }
    
    .pattern-top-right {
      top: 0;
      right: 0;
    }
    
    .pattern-bottom-left {
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="chinese-pattern pattern-top-right"></div>
  <div class="chinese-pattern pattern-bottom-left"></div>
  
  <div class="header">
    <h1 class="page-title">起名小程序 - 界面预览</h1>
    <p class="page-description">中国山水笔墨风格界面设计</p>
  </div>
  
  <div class="preview-container">
    <!-- 登录页面 -->
    <div class="preview-card">
      <div class="preview-header">
        <div class="preview-title">登录页</div>
      </div>
      <div class="iframe-container">
        <iframe src="login.html" title="登录页面"></iframe>
        <div class="device-frame"></div>
      </div>
    </div>
    
    <!-- 主页 -->
    <div class="preview-card">
      <div class="preview-header">
        <div class="preview-title">主页</div>
      </div>
      <div class="iframe-container">
        <iframe src="index.html" title="主页"></iframe>
        <div class="device-frame"></div>
      </div>
    </div>
    
    <!-- 免费起名页面 -->
    <div class="preview-card">
      <div class="preview-header">
        <div class="preview-title">免费起名页面</div>
      </div>
      <div class="iframe-container">
        <iframe src="qiming-free.html" title="免费起名页面"></iframe>
        <div class="device-frame"></div>
      </div>
    </div>
    
    <!-- 生肖起名页面 -->
    <div class="preview-card">
      <div class="preview-header">
        <div class="preview-title">生肖起名页面</div>
      </div>
      <div class="iframe-container">
        <iframe src="zodiac-naming.html" title="生肖起名页面"></iframe>
        <div class="device-frame"></div>
      </div>
    </div>
    
    <!-- 传统文化起名页面 -->
    <div class="preview-card">
      <div class="preview-header">
        <div class="preview-title">传统文化起名页面</div>
      </div>
      <div class="iframe-container">
        <iframe src="traditional-naming.html" title="传统文化起名页面"></iframe>
        <div class="device-frame"></div>
      </div>
    </div>
    
    <!-- 文化典故起名页面 -->
    <div class="preview-card">
      <div class="preview-header">
        <div class="preview-title">文化典故起名页面</div>
      </div>
      <div class="iframe-container">
        <iframe src="culture-naming.html" title="文化典故起名页面"></iframe>
        <div class="device-frame"></div>
      </div>
    </div>
  </div>
</body>
</html> 